<!DOCTYPE html>
<html>

<head>
    <meta charset="utf8">
    <title>条件渲染</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="myapp">
        <h1 v-if="is_show">如果展示标题就不展示段落</h1>
        <!-- if else 必须紧挨着不然识别不到-->
        <!-- <br>  -->
        <!-- 分支逻辑 -->
        <!-- if else if else 可跟js表达式 -->
        <p v-else>如果展示段落就不展示标题</p>
        <h2 v-if="mark>60">超过及格分数线</h2>
        <h2 v-else-if="mark<60">不及格</h2>
        <h2 v-else="mark==60">刚好及格</h2>
        <!-- 控制一组内容的渲染 -->
        <div v-if="is_show_group">
            <p>123</p>
            <p>123</p>
            <p>123</p>
        </div>
        <!-- 更推荐使用template 控制一组内容因为不会渲染template本身效率更高 -->
        <template v-else>
            <p>123</p>
            <p>123</p>
            <p>123</p>
        </template>
        <!-- v-show 用法如v-if类似,但
            1.不支持else
            2.不支持控制多组条件渲染
            3.不支持用template
            4.本质上还是要渲染,不过是通过调整CSS样式使得其看不到 
        -->
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                is_show: 1,
                mark: 60,
                is_show_group: false,
            }
        },
        methods: {

        }
    }
    Vue.createApp(app).mount("#myapp");    
</script>

</html>